<template>
    <div>
        <h1>显示</h1>
        <tr>
            <td>
                门店选择:
                <select v-model="tiaoj.Kroom">
                    <option value="">请选择</option>
                    <option value="门店1">门店1</option>
                    <option value="门店2">门店2</option>
                    <option value="门店3">门店3</option>
                </select>
                门店名称:
                <input type="text" v-model="tiaoj.Kname">
                卡卷类型:
                <select v-model="tiaoj.Ktype">
                    <option value="">请选择</option>
                    <option value="时常卡">时常卡</option>
                    <option value="次数卡">次数卡</option>
                    <option value="期限卡">期限卡</option>
                </select>
                状态:
                <select v-model="tiaoj.Kstatus">
                    <option value="">请选择</option>
                    <option value="下架">下架</option>
                    <option value="上架">上架</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="查询" class="btn btn-success"  @click="xians"> -
                
                <input type="button" value="重置" @click="choz">
            </td>
            
            
            <td><input type="button" value="新增卡卷" class="btn btn-success" @click="tianj"></td>
        </tr>
        <div class="d-grid gap-10">
  <button class="btn btn-primary" type="button" @click="pishan">超绝.无敌.帅气.黎明.通透.气场.冷静.布局.预判.问鼎.巅峰.覆盖.穿透.手法.诠释.挑战.碾压.极致.批量删除</button>

</div>
    
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" @change="idder" v-model="moren"></td>
                    <td>Kname</td>
                    <td>Ktype</td>
                    <td>Kroom</td>
                    <td>times</td>
                    <td>havetimes</td>
                    <td>price</td>
                    <td>total</td>
                    <td>Kstatus</td>
                    <td>Imgurl</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td><input type="checkbox"  v-model="cunc" :value=" d.id "></td>
                    <td>{{d.Kname}}</td>
                    <td>{{d.Ktype}}</td>
                    <td>{{d.Kroom}}</td>
                    <td>{{d.times}}</td>
                    <td>{{d.havetimes}}</td>
                    <td>{{d.price}}</td>
                    <td>{{d.total}}</td>
                    <td>{{d.Kstatus}}</td>
                    <td><img :src="'https://localhost:7111/'+d.Imgurl" style="width: 60px;height: 60px;"></td>
                    <td>
                        <a href="#" @click="xiug(d.id)">编辑</a>_
                        <a href="#" @click="xiaj(d.id)" >下架</a>_
                        <a href="#" @click="xians">复制</a>_
                        <a href="#" @click="shanc(d.id)">删除</a>

                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="feny(1)">
        <input type="button" value="上一页" @click="feny(2)">
        <input type="button" v-for="d in Page.PageCount" :value="d" @click="yema(d)">
        <input type="button" value="下一页" @click="feny(3)">
        <input type="button" value="尾页" @click="feny(4)">
        每页显示:
        <select v-model="tiaoj.PageSize" @change="xlyrl">
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="8">8</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>条
        ||跳到<input type="text" v-model="tiaoj.PageIndex">页
        <input type="button" value="确定" @click="qued">
    </div>
    <a href="https://localhost:7111/api/Base/daochu">1111</a>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router= useRouter();
///////分页
const qued =()=>{
    if(tiaoj.value.PageIndex<1)
    {
        tiaoj.value.PageIndex=1
    }
    if(tiaoj.value.PageIndex>Page.value.PageCount)
    {
        tiaoj.value.PageIndex=1
    }
    xians();
}

const xlyrl =()=>{
    tiaoj.value.PageIndex=1;
    xians();
}
const feny =(a:any)=>{
    if(a==1)
    {
        tiaoj.value.PageIndex=1;
        xians();
    }
    if(a==2)
    {
        if(tiaoj.value.PageIndex>1)
        {
            tiaoj.value.PageIndex-=1;
            xians();
        }
        
        
    }
    if(a==3)
    {
        if(tiaoj.value.PageIndex<Page.value.PageCount)
        {
            tiaoj.value.PageIndex+=1;
            xians();
        }
        
    }
    if(a==4)
    {
       
        tiaoj.value.PageIndex=Page.value.PageCount;
        xians();
    }
}
const yema=(d:any)=>{
    tiaoj.value.PageIndex=d;
    xians();
}






/////////////////////
const tianj=()=>{
    router.push({path:'/Add'})
}

const xiug=(tid:any)=>{
    router.push({path:'/Upt',query:{id:tid}});
}
const shanc =(id:any)=>{
    if(!confirm("确定要删除吗"))
    {
        return;
    }
    axios.get("https://localhost:7111/api/Base/Delone",{params:{id:id}}).then(res=>{
        if(res.data==1)
        {
            alert("删除成功");
            xians();
        }
        else{
            alert("删除失败");
            xians();
        }
    })
}
const xiaj =(id:any)=>{
    axios.get("https://localhost:7111/api/Base/zhuangt",{params:{id:id}}).then(res=>{
        if(res.data==1)
        {
            alert("修改成功");
            xians();
        }
        else{
            alert("修改失败");
            xians();
        }
    })
}

/////全选反选
const cunc = ref([]);
const moren = ref(false);
const idder = ()=>{
    if(moren.value)
    {
        data.value.forEach((a)=>{
            cunc.value.push(a.id)
        })
    }
    else
    {
        cunc.value=[];
    }
}
//批量删除
const pishan = ()=>{
    if(!confirm("你确定删除?",cunc.value))
    {
        return;
    }
    axios.get("https://localhost:7111/api/Base/Delsome",{params:{ids:cunc.value.toString()}}).then(res=>{
        if(res.data>=1)
        {
            alert("删除成功");
            xians();
            return;
        }
        else
        {
            alert("删除失败");
            return;
        }
    })
}
//显示
onMounted(() => {
   xians(); 
});
const data=ref([{
    "id": 0,
      "Kname": "1",
      "Ktype": "",
      "Kroom": "",
      "times": "",
      "havetimes": "",
      "price": 0,
      "total": 0,
      "Kstatus": "",
      "Imgurl": "",
      "IsDel": 1
}]);
const tiaoj =ref({
    PageIndex:1,
    PageSize:2,
    Kroom:"",
    Kname:"",
    Ktype:"",
    Kstatus:""
})
const Page = ref({
    Count:0,        //总数居数
    PageCount:0     //总页数
})
const xians = ()=>{
    axios.get("https://localhost:7111/api/Base/Showone",{params:tiaoj.value}).then(res=>{
        data.value=res.data.Psize;
        Page.value.Count=res.data.count;
        Page.value.PageCount=Math.ceil(Page.value.Count/tiaoj.value.PageSize)
    })
}
//重置
const choz =()=>{
    tiaoj.value.Kroom="",
    tiaoj.value.Kname="",
    tiaoj.value.Ktype="",
    tiaoj.value.Kstatus=""
}
</script>

<style scoped>

</style>